<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="f1"/><br/>
<input type="checkbox" name="q" onclick="run1(this)"/><span id="a1">a</span> &nbsp;
<input type="checkbox" name="q" onclick="run2(this)"/><span id="a2">b</span> &nbsp;
<input type="checkbox" name="q" onclick="run3(this)"/><span id="a3">c</span> &nbsp;
<input type="checkbox" name="q" onclick="run4(this)"/><span id="a4">d</span> &nbsp;
<input type="checkbox" name="q" onclick="run5(this)"/><span id="a5">e</span> &nbsp;
<input type="checkbox" name="q" onclick="run6(this)"/><span id="a6">f</span> &nbsp;
</body>
<script>
    var str="";
    var reg=/^\s*$/;
    var id = document.getElementById("f1");
    function run1(checkbox) {
        str = document.getElementById("a1").innerHTML;
        var q="";
        if (checkbox.checked==true){
            if (reg.test(id.value)) {
                id.value+=str;
            }else if (!reg.test(id.value)) {
                id.value+=","+str;
            }
        } else {
            var sp1 = id.value.split(",");
            for (let i = 0; i < sp1.length; i++) {
                if (sp1[i] != str) {
                    if (i == sp1.length-1) {
                        q+=sp1[i];
                    }else {
                        q+=sp1[i]+",";
                    }
                }
            }
            id.value=q;
        }
    }
    function run2(checkbox) {
        str=document.getElementById("a2").innerHTML;
        var q="";
        if (checkbox.checked==true){
            if (reg.test(id.value)) {
                id.value+=str;
            }else if (!reg.test(id.value)) {
                id.value+=","+str;
            }
        } else {
            var sp1 = id.value.split(",");
            for (let i = 0; i < sp1.length; i++) {
                if (sp1[i] != str) {
                    if (i == sp1.length-1) {
                        q+=sp1[i];
                    }else {
                        q+=sp1[i]+",";
                    }
                }
            }
            id.value=q;
        }

    }
    function run3(checkbox) {
        str=document.getElementById("a3").innerHTML;
        var q="";
        if (checkbox.checked==true){
            if (reg.test(id.value)) {
                id.value+=str;
            }else if (!reg.test(id.value)) {
                id.value+=","+str;
            }
        } else {
            var sp1 = id.value.split(",");
            for (let i = 0; i < sp1.length; i++) {
                if (sp1[i] != str) {
                    if (i == sp1.length-1) {
                        q+=sp1[i];
                    }else {
                        q+=sp1[i]+",";
                    }
                }
            }
            id.value=q;
        }
    }
    function run4(checkbox) {
        str=document.getElementById("a4").innerHTML;
        var q="";
        if (checkbox.checked==true){
            if (reg.test(id.value)) {
                id.value+=str;
            }else if (!reg.test(id.value)) {
                id.value+=","+str;
            }
        } else {
            var sp1 = id.value.split(",");
            for (let i = 0; i < sp1.length; i++) {
                if (sp1[i] != str) {
                    if (i == sp1.length-1) {
                        q+=sp1[i];
                    }else {
                        q+=sp1[i]+",";
                    }
                }
            }
            id.value=q;
        }
    }
    function run5(checkbox) {
        str=document.getElementById("a5").innerHTML;
        var q="";
        if (checkbox.checked==true){
            if (reg.test(id.value)) {
                id.value+=str;
            }else if (!reg.test(id.value)) {
                id.value+=","+str;
            }
        } else {
            var sp1 = id.value.split(",");
            for (let i = 0; i < sp1.length; i++) {
                if (sp1[i] != str) {
                    if (i == sp1.length-1) {
                        q+=sp1[i];
                    }else {
                        q+=sp1[i]+",";
                    }
                }
            }
            id.value=q;
        }
    }
    function run6(checkbox) {
        str=document.getElementById("a6").innerHTML;
        var q="";
        if (checkbox.checked==true){
            if (reg.test(id.value)) {
                id.value+=str;
            }else if (!reg.test(id.value)) {
                id.value+=","+str;
            }
        } else {
            var sp1 = id.value.split(",");
            for (let i = 0; i < sp1.length; i++) {
                if (sp1[i] != str) {
                    if (i == sp1.length-1) {
                        q+=sp1[i];
                    }else {
                        q+=sp1[i]+",";
                    }
                }
            }
            id.value=q;
        }
    }
</script>
</html>